import React, { useEffect, useState } from "react";
import "highlight.js/styles/default.css";
import hljs from "highlight.js";
import {
  useSearchParams,
  createSearchParams,
  useLocation,
} from "react-router-dom";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  container: {
    height: "100vh",
  },
  menu: {
    color: "rgba(255, 255, 255, 0.65)",
    padding: "10px 0 10px 35px",
    margin: "3px 0",
    cursor: "pointer",
    "&:hover": {
      color: "rgba(255, 255, 255, 1)",
    },
  },
  menuActive: {
    background: "#1890ff",
    color: "rgba(255, 255, 255, 1)",
  },
  sider: {
    padding: "10px 0",
    width: "280px",
    float: "left",
    background: "#001529",
    boxSizing: "border-box",
    height: "100%",
    overflow: "auto",
  },
  content: {
    marginLeft: "280px",
    padding: "30px",
    boxSizing: "border-box",
    height: "100vh",
    overflow: "auto",
  },
});

import panels from "./panels";
export default App;

function App() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [key, setKey] = useState(
    () => searchParams.get("panel") || "QuickFilter"
  );
  const location = useLocation();

  useEffect(() => {
    document.querySelectorAll("code.language-jsx").forEach((b) => {
      try {
        hljs.highlightBlock(b);
      } catch (err) {
        console.error(err);
      }
    });
  }, [location]);

  const classes = useStyles();

  const handler = (k) => {
    const sp = createSearchParams(searchParams);
    sp.set("panel", k);
    setSearchParams(sp);
    setKey(k);
  };

  return (
    <div className={classes.container}>
      <div className={classes.sider}>
        {panels.map((i) => (
          <div
            className={
              classes.menu + " " + (key == i[0] ? classes.menuActive : "")
            }
            onClick={() => handler(i[0])}
            key={i[0]}
          >
            {i[0]}
          </div>
        ))}
      </div>
      <div className={classes.content}>
        {panels.map(([k, C], index) => k == key && <C key={index} />)}
      </div>
    </div>
  );
}
